<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入电话号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
        >
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="所属类型" prop="ownerType">
        <el-select
          v-model="queryParams.ownerType"
          placeholder="请选择所属类型"
          clearable
          size="small"
        >
          <el-option label="平台" value="platform" />
          <el-option label="服务商" value="service" />
        </el-select>
      </el-form-item>

      <el-form-item label="服务商ID" prop="serviceId">
        <el-input
          v-model="queryParams.serviceId"
          placeholder="请输入服务商ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="打卡类型" prop="clockType">
        <el-select
          v-model="queryParams.clockType"
          placeholder="请选择打卡类型"
          clearable
          size="small"
        >
          <el-option label="上班" value="1" />
          <el-option label="下班" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      border
      :data="driverList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" />

      <el-table-column label="用户名" align="center" prop="userName" />

      <el-table-column label="电话" align="center" prop="phone" />

      <el-table-column label="所属类型" align="center" prop="ownerType">
        <template slot-scope="scope">
          <el-tag :type="getOwnerTypeTagType(scope.row.ownerType)" size="small">
            {{ getOwnerTypeText(scope.row.ownerType) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="服务商ID" align="center" prop="serviceId" />

      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        show-overflow-tooltip
      />

      <el-table-column label="更新时间" align="center" prop="updateTime" />

      <el-table-column label="更新者" align="center" prop="updateBy" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改调度信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      append-to-body
      custom-class="driver-dialog"
      :before-close="cancel"
      center
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="driver-form"
      >
        <div class="dialog-header">
          <i class="el-icon-user header-icon"></i>
          <span class="header-text">调度信息</span>
        </div>
        <div class="form-container">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="userName">
                <el-input
                  v-model="form.userName"
                  placeholder="请输入用户名"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入电话号码"
                  :disabled="isView"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select
                  v-model="form.status"
                  placeholder="请选择状态"
                  :disabled="isView"
                  class="full-width-input"
                >
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="所属类型" prop="ownerType">
                <el-select
                  v-model="form.ownerType"
                  placeholder="请选择所属类型"
                  :disabled="isView"
                  class="full-width-input"
                >
                  <el-option label="平台" value="platform" />
                  <el-option label="服务商" value="service" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注信息"
                  :disabled="isView"
                  :rows="3"
                  class="full-width-input"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 查看模式下显示的只读信息 -->
          <div v-if="isView && form.id">
            <el-divider content-position="left" class="divider-title"
              >系统信息</el-divider
            >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input
                    v-model="form.createTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建者">
                  <el-input
                    v-model="form.createBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="更新时间">
                  <el-input
                    v-model="form.updateTime"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="更新者">
                  <el-input
                    v-model="form.updateBy"
                    disabled
                    class="full-width-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer" v-if="!isView">
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="submitForm"
          icon="el-icon-check"
          class="submit-btn"
          >确 定</el-button
        >
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="cancel" icon="el-icon-close" class="cancel-btn"
          >关 闭</el-button
        >
      </div>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listOrder,
  delOrder,
  addDispatch,
  dispatchInfo,
  updateDispatch,
} from "@/api/api/facilitator";

export default {
  name: "DriverList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 调度信息表格数据
      driverList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否为查看模式
      isView: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" },
        ],
        ownerType: [
          { required: true, message: "所属类型不能为空", trigger: "change" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        phone: null,
        status: null,
        ownerType: null,
        serviceId: null,
        clockType: null,
        searchValue: null,
        remark: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**
     * 查询调度信息列表
     */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then((response) => {
        this.driverList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /**
     * 搜索按钮操作
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置按钮操作
     */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userName: null,
        phone: null,
        status: 1,
        ownerType: null,
        serviceId: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.isView = false;
      this.open = true;
      this.title = "添加调度信息";
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      this.isView = true;
      const id = row.id;
      dispatchInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "查看调度信息";
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.isView = false;
      const id = row.id || this.ids;
      dispatchInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改调度信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改操作
            updateDispatch(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            // 新增操作
            addDispatch(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /**
     * 状态修改
     * @param {Object} row 行数据
     */
    handleStatusChange(row) {
      let text = row.status === 1 ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
        .then(function () {
          // 这里应该调用修改状态的API
          // return changeUserStatus(row.id, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === 0 ? 1 : 0;
        });
    },
    /**
     * 删除按钮操作
     */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除调度信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delOrder(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /**
     * 导出按钮操作
     */
    handleExport() {
      this.download(
        "api/driver/export",
        {
          ...this.queryParams,
        },
        `driver_${new Date().getTime()}.xlsx`
      );
    },
    /**
     * 获取打卡类型文本
     * @param {string|number} clockType 打卡类型
     * @returns {string} 打卡类型文本
     */
    getClockTypeText(clockType) {
      const typeMap = {
        1: "上班",
        2: "下班",
        1: "上班",
        2: "下班",
      };
      return typeMap[clockType] || "未知";
    },
    /**
     * 获取打卡类型标签颜色
     * @param {string|number} clockType 打卡类型
     * @returns {string} 标签类型
     */
    getClockTypeTagType(clockType) {
      const typeMap = {
        1: "success",
        2: "warning",
        1: "success",
        2: "warning",
      };
      return typeMap[clockType] || "info";
    },
    /**
     * 获取打卡类型图标
     * @param {string|number} clockType 打卡类型
     * @returns {string} 图标类名
     */
    getClockTypeIcon(clockType) {
      const iconMap = {
        1: "el-icon-top",
        2: "el-icon-bottom",
        1: "el-icon-top",
        2: "el-icon-bottom",
      };
      return iconMap[clockType] || "el-icon-time";
    },
    /**
     * 获取所属类型文本
     * @param {string} ownerType 所属类型
     * @returns {string} 所属类型文本
     */
    getOwnerTypeText(ownerType) {
      const typeMap = {
        platform: "平台",
        service: "服务商",
      };
      return typeMap[ownerType] || "未知";
    },
    /**
     * 获取所属类型标签颜色
     * @param {string} ownerType 所属类型
     * @returns {string} 标签类型
     */
    getOwnerTypeTagType(ownerType) {
      const typeMap = {
        platform: "primary",
        service: "success",
      };
      return typeMap[ownerType] || "info";
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.driver-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.driver-dialog >>> .el-dialog__header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #1890ff, #0050b3);
  margin-right: 0;
}

.driver-dialog >>> .el-dialog__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
}

.driver-dialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
  font-size: 20px;
}

.driver-dialog >>> .el-dialog__body {
  padding: 30px 20px;
}

.driver-dialog >>> .el-dialog__footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background-color: #fafafa;
}

.driver-form {
  padding: 0;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.header-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 10px;
}

.header-text {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.form-container {
  margin-bottom: 20px;
  background-color: #f9fafc;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.form-container:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

.divider-title {
  font-size: 16px;
  font-weight: bold;
  color: #1890ff;
}

.el-divider {
  margin: 24px 0;
}

.full-width-input {
  width: 100%;
}

.full-width-input >>> .el-input__inner {
  height: 42px;
  line-height: 42px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-input__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-input__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.full-width-input >>> .el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.full-width-input >>> .el-textarea__inner:hover {
  border-color: #1890ff;
}

.full-width-input >>> .el-textarea__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.submit-btn {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: linear-gradient(to right, #1890ff, #096dd9);
  border: none;
  transition: all 0.3s;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.cancel-btn {
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  margin-right: 16px;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.el-input-number.full-width-input {
  width: 100%;
}

.el-input-number.full-width-input >>> .el-input__inner {
  text-align: left;
}
</style>
